<template>
  <div>
    <h1>企业列表</h1>
    <!-- 数据列表 -->
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column type="selection" width="55" />
      <el-table-column
        prop="code"
        label="企业id"
        width="120"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="name"
        label="企业客户"
        width="140"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="user"
        label="联系人"
        width="140"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="mobile"
        label="手机"
        width="170"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="200"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="expireDate"
        label="到期时间"
        width="160"
        header-align="center"
        align="center"
      />
      <el-table-column
        label="操作"
        width="290"
        header-align="center"
        align="center"
      >
        <template v-slot="{ row }">
          <span class="btn">进入</span>
          <span class="btn">资料</span>
          <span class="btn">权限</span>
          <span class="btn">资金</span>
          <span class="btn">续费</span>
          <span class="btn">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
 <el-pagination background @current-change="chgpg" @size-change="chg" :page-size="pageSize"
 :page-sizes="[10, 20, 30, 40, 50, 100]" layout="total,sizes, prev, pager, next , jumper" :total="total"
style="float:right;margin-top:20px;margin-right:20px;" />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { queryEnterprise } from "@/api/plarform/enterprise.js";
defineOptions({
  //name 作为一种规范最好必须写上并且和路由name保持一致
  name: "enterprise"
});

//各应式数据
const tableData = ref([]);
//分页信息
const page = ref(1);//默认第一页
const pageSize = ref(10);//每页记录数
const total = ref(0);//总记录数

//方法

//当前页数发生变化
function chgpg(pg) {
  page.value = pg;//更新当前第几页
  initData();
}

//每页记录数
function chg(pgSize) {
  pageSize.value = pgSize;
  page.value = 1;
  initData();
}

//请求列表数据
function initData() {

  let data = {
    "page" : page.value,
    "pageSize" : pageSize.value
  }

  queryEnterprise({
  data
  }).then(res => {
    console.log(res);
    if(res.code == 200){
      tableData.value = res.data.list;//结果
      page.value = res.data.page;
      pageSize.value = res.data.pageSize;
      total.value = res.data.total;
    }
  });
}

//声明周期函数
onMounted(() => {
  initData();
});
</script>
<style>
.btn{
  color: #3399ff;
  margin-left:5px;
  cursor: pointer;
}
</style>
